<template>
	<view>
		<music title="查询歌名" :iconList="['&#xe728;','&#xe600;']"></music>
		<!-- 搜索栏 -->
		<view class="searchInput">
				<view class="searchInputContent">
					<span class="iconfont">&#x101d4;</span>
					<input placeholder="搜索歌曲" @blur="searchByName" v-model="searchMusicName" />
				</view>
		</view>
		
		<!-- music列表 -->
		<template v-for="(item,index) in musicNameData" :key="index">
			<view class="musicList">
				<view class="musicListLeft">
					<view class="musicListLeftRow1">{{item.name}}</view>
					<view class="musicListLeftRow2">
						<view>
							<image src="../../static/images/sq.png"></image>
						</view>
						<view v-for="it1,in1 in item.artists">
							{{it1.name}}
						</view>
					</view>
				</view>
				<view class="musicListRight" @click="playMusic(item.id)">
					<image src="../../static/images/mti-播放2.png"></image>
				</view>
			</view>
		</template>
		
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import '@/common/iconfont.css'
	import music from "../../component/musciHead/musciHead.vue"
	import {onMounted} from "vue";
	import {useRoute} from 'vue-router';
	
	let musicNameData = ref([])
	let musicName = ref("")
	component: {music}
	// onLoad(()=>{
	// 	console.log("ss")
	// })
	
	onMounted(()=>{
		musicName.value = useRoute().query.musicName
		console.log(musicName.value)
		// 获取所有歌曲
		uni.request({
			url: "http://localhost:3000/search?keywords=" + musicName.value,
			success: (ref) => {
				musicNameData.value = ref.data.result.songs
				console.log(musicNameData.value)
			}
		})
	})
	function playMusic(id){
		// console.log("id",id)
		uni.navigateTo({
			url: "/pages/demo02/demo02?id=" + id
		}) 
	}
</script>

<style lang="scss" scoped>
	.searchInput{
			width: 100%;
			height: 70rpx;
			margin-top: 50rpx;
			margin-bottom: 20rpx;
			// background-color: #000;
			display: flex;
			justify-content: center;
			.searchInputContent{
				width: 90%;
				height: 100%;
				border-radius: 40rpx;
				background: #c8c8c8;
				display: flex;
				span{
					margin-left: 30rpx;
					margin-top: 20rpx;
				}
				input{
					margin-left: 30rpx;
					margin-top: 10rpx;
				}
			}
		}
	.musicList{
		width: 95%;
		// height: 100rpx;
		margin: 0 auto;
		// background-color: #888888;
		display: flex;
		border-bottom: 1rpx solid black;
		flex-direction: row;
		justify-content: space-between;
		.musicListLeft{
			// width: 300rpx;
			// height: 100%;
			// background: #000;
			display: flex;
			flex-direction: column;
			margin: 10rpx;
			.musicListLeftRow1{
				
			}
			.musicListLeftRow2{
				display: flex;
				flex-direction: row;
				image{
					width: 40rpx;
					height: 30rpx;
				}
				>:nth-last-child(1){
					margin-left: 10rpx;
				}
			}
		}
		.musicListRight{
			width: 100rpx;
			height: 100rpx;
			// background: #000;
			image{
				width: 80%;
				height: 80%;
				margin: 10rpx;
			}
		}
	}
</style>
